<!-- 设置动态表单组件--右侧抽屉设置栏 -->
<template>
  <div class="drawer" :style="{ right: visible ? '0' : '-350px' }">
    <div class="drawer-title">
      <div class="txt">{{ getComponent?.componentName }}</div>
      <div @click="visible = false">
        <span class="icon-delete iconfont icon" />
      </div>
    </div>
    <a-form
      auto-label-width
      layout="vertical"
      class="form"
      :model="formData"
      size="small"
    >
      <a-form-item label="组件名称:">
        <a-input
          placeholder="请输入组件名称"
          v-model="formData.name"
          @change="emit('componentObjChange', formData)"
        />
      </a-form-item>
      <a-form-item label="是否必填:">
        <a-switch
          v-model="formData.required"
          :checked-value="1"
          :unchecked-value="2"
          @change="emit('componentObjChange', formData)"
        />
      </a-form-item>
      <a-form-item label="显示区域:">
        <a-radio-group
          type="button"
          v-model="formData.span"
          @change="emit('componentObjChange', formData)"
        >
          <a-radio :value="12">50%</a-radio>
          <a-radio :value="24">100%</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="设为审批流程条件">
        <a-switch
          v-model="formData.isProcessConditions"
          :checked-value="1"
          :unchecked-value="2"
          @change="emit('componentObjChange', formData)"
        />
      </a-form-item>
      <ExtendedFields
        :props="formData.props"
        :showFieldList="getComponent?.showFieldList"
        :uuid="componentObj.uuid"
        @propsChange="propsChange"
      />
    </a-form>
  </div>
</template>

<script lang="ts" setup>
  import { ref, computed, reactive, watch } from 'vue';
  import { componentList } from '../../../set-up-config';
  import ExtendedFields from './extended-fields.vue';

  const visible = ref(false);
  defineExpose({ visible });
  const emit = defineEmits(['componentObjChange']);
  const props = withDefaults(
    //参数说明
    defineProps<{
      componentObj: any;
    }>(),
    {
      componentObj: {
        code: '',
        componentType: '',
        props: {},
        required: 2,
        span: '',
        name: '',
        uuid: '',
        isMust: 2,
        isProcessConditions: 2
      }
    }
  );

  //根据组件code返回组件信息
  const getComponent = computed(() => {
    return componentList.find((item) => item.code === props.componentObj.code);
  });

  const formData = reactive({
    //复制componentObj
    code: '',
    componentType: '',
    props: {},
    required: 2,
    span: '',
    name: '',
    isMust: 2,
    isProcessConditions: 2
  });
  //监听uuid改变复制componentObj
  watch(
    () => props.componentObj.uuid,
    () => {
      formData.code = props.componentObj.code;
      formData.componentType = props.componentObj.componentType;
      formData.props = {
        ...props.componentObj.props
      };
      formData.required = props.componentObj.required;
      formData.span = props.componentObj.span;
      formData.name = props.componentObj.name;
      formData.isMust = props.componentObj.isMust;
      formData.isProcessConditions = props.componentObj.isProcessConditions;
    }
  );

  const propsChange = (backProps: any) => {
    //props发生改变
    formData.props = {
      ...backProps
    };
    emit('componentObjChange', formData);
  };
</script>

<style lang="less" scoped>
  .drawer {
    // width: 350px;
    // position: absolute;
    background: #fff;
    // top: 0;
    // bottom: 0;
    transition-property: all;
    transition-duration: 0.3s;

    &-title {
      line-height: 40px;
      height: 40px;
      border-bottom: var(--color-neutral-3) solid 1px;
      display: flex;
      justify-content: space-between;
      padding: 0 15px;
      font-size: 16px;

      .icon {
        font-size: 20px;
        cursor: pointer;
      }
    }
  }

  .form {
    padding: 10px;
  }
</style>
